<template>
  <el-container>
    <el-header>
      <div class="header_logo">
        <img src="./assets/logo.png" alt="" />
      </div>
      <div class="header_button">
        <i class="iconfont icon-left-1 prev common" @click="$router.go(-1)"></i>
        <i class="iconfont icon-right-1-copy common" @click="$router.go(1)"></i>
      </div>
      <div class="header_input">
        <el-popover
          placement="bottom"
          width="300"
          trigger="focus"
          visible-arrow="false"
          v-model="isSearchPopShow"
        >
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            size="mini"
            slot="reference"
            v-model="searchInput"
            @keyup.enter.native="onSubmit"
          >
          </el-input>
          <!-- 热搜榜 -->
          <div class="hotSearch">
            <div class="hotSearchTitle">热搜榜</div>
            <div
              class="hotSearchItem"
              v-for="(item, index) in musicHotList"
              :key="index"
              @click="clickHotSearchItem(item.searchWord)"
            >
              <div class="hotSearchIndex" :class="index < 3 ? 'topThree' : ''">
                {{ index + 1 }}
              </div>
              <div class="hotSearchInfo">
                <div
                  class="word"
                  :class="index < 3 ? 'hotSearchWordTopThree' : ''"
                >
                  {{ item.searchWord }}
                </div>
                <div class="content" :class="index < 3 ? 'topInfo' : ''">
                  {{ item.content }}
                </div>
              </div>
            </div>
          </div>
        </el-popover>
      </div>
      <!-- 登录组件 -->
      <div class="header-login">
        <img
          :src="userInfo.avatarUrl"
          v-if="userInfo.avatarUrl"
          @click="goPerson"
        />
        <img src="./assets/test.jpg" @click="Login" v-else />
        <p v-if="userInfo.nickname" class="nickname">
          {{ this.userInfo.nickname }}
        </p>
        <p v-else>点击头像登录</p>
      </div>
      <!-- 登录弹出框 -->
      <el-dialog
        :title="this.loginmode == '0' ? '用户注册' : '用户登录'"
        :visible.sync="loginDialogVisible"
        width="30%"
        :before-close="handleCloseLogin"
      >
        <login
          @getUserInfo="getUserInfo"
          @showloginDialogVisible="showloginDialogVisible"
          @resetLoginForm="resetLoginForm"
        ></login>
      </el-dialog>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          active-text-color="black"
          router
          :default-active="defaultActive"
        >
          <el-menu-item index="/discover">
            <i class="iconfont icon-musicfill"></i>
            <span slot="title">发现音乐</span>
          </el-menu-item>
          <el-menu-item index="/video">
            <i class="iconfont icon-video"></i>
            <span slot="title">视频</span>
          </el-menu-item>
          <el-menu-item index="/favorites">
            <i class="iconfont icon-shoucang" style="font-size: 25px"></i>
            <span slot="title">收藏</span>
          </el-menu-item>
          <el-menu-item index="/recommendmusic">
            <i class="iconfont icon-dianzan"></i>
            <span slot="title">每日推荐</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <div class="footer">
      <bottom-control></bottom-control>
    </div>
    <Lyric></Lyric>
  </el-container>
</template>

<script>
import { mapState } from "vuex";
import Login from "./components/login/Login.vue";
import BottomControl from "./components/bottomcontrol/BottomControl.vue";
import Lyric from "./components/lyric/Lyric.vue";
export default {
  components: { Login, BottomControl, Lyric },
  created() {
    this.defaultActive = this.$route.path;
    this.getHotSearch();
    // 判断用户之前是否登录
    if (localStorage.getItem("userInfo")) {
      this.$store.state.isLogin = true;
      this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    }
  },
  data() {
    return {
      defaultActive: "/discover",
      userInfo: {},
      // 热搜列表
      musicHotList: [],
      // 搜索框内容
      searchInput: "",
      // 状态是否可见
      isSearchPopShow: false,
      // 登录弹出框是否可见
      loginDialogVisible: false,
      ruleForm: {},
    };
  },
  computed: {
    ...mapState(["loginmode"]),
  },
  methods: {
    // 获取热搜
    async getHotSearch() {
      const { data: res } = await this.$http("/search/hot/detail");
      this.musicHotList = res.data;
    },

    // 点击热搜列表回调
    clickHotSearchItem(searchWord) {
      this.searchInput = searchWord;
      this.goSearch();
    },
    // 按下enter事件跳转
    onSubmit(e) {
      // console.log(e);
      if (e.keyCode == 13 && this.searchInput != "") {
        this.goSearch();
      }
    },
    // 跳转到搜索详情
    goSearch() {
      this.isSearchPopShow = false;
      this.$router.push({ name: "search", params: { id: this.searchInput } });
    },
    // 登录事件
    Login() {
      this.loginDialogVisible = true;
    },
    // 登录成功事件
    getUserInfo(userInfo) {
      // 将保存在locaSt
      this.userInfo = userInfo;
      this.loginDialogVisible = false;
    },
    showloginDialogVisible() {
      this.loginDialogVisible = false;
    },
    // 弹出框关闭事件
    handleCloseLogin() {
      this.loginDialogVisible = false;
      // 重置所有表单内容
      this.resetLoginForm(this.ruleForm);
    },
    resetLoginForm(ruleForm) {
      this.ruleForm = ruleForm;
      ruleForm.resetFields();
    },

    // 跳转到个人主页
    goPerson() {
      this.$router.push({ name: "personalIndex" });
    },
  },
};
</script>

<style lang="less" scoped>
.el-header {
  position: relative;
  background-color: #ec4141;
  color: #333;
  line-height: 60px;
  display: flex;
  align-items: center;

  .header_logo {
    margin: 10px 0;
    width: 110px;
    height: 30px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.header-login {
  width: 200px;
  height: 60px;
  position: absolute;
  top: 0;
  right: 20px;
  cursor: pointer;
  img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 15px;
    left: 20px;
  }
  p {
    display: inline;
    position: absolute;
    top: 0;
    right: 50px;
    color: #fff;
  }
  .nickname {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
  }
}
.header_input {
  position: absolute;
  top: 0;
  left: 356px;
  width: 200px;
  height: 60px;
  input {
    outline: none;
    height: 30px;
    border-radius: 15px;
    background-color: #e13e3e;
    border: 1px solid #e13e3e;
    padding-left: 20px;
    color: #fff;
  }
}
.common {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #e13e3e;
  color: #fff;
  padding: 5px;
  cursor: pointer;
}
.header_button {
  margin-left: 100px;
  width: 100px;

  .prev {
    margin-right: 30px;
  }
}
.el-aside {
  background-color: #fff;
  color: #333;
  height: 800px;
}

.hotSearch {
  height: 400px;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hotSearch::-webkit-scrollbar {
  display: none;
}
.hotSearchItem {
  display: flex;
  align-items: center;
  padding: 6.5px 15px;
  cursor: pointer;
}
.hotSearchTitle {
  font-size: 16px;
  margin: 10px 0 5px 20px;
}
.hotSearchInfo {
  display: flex;
  flex-direction: column;
}
.hotSearchIndex {
  margin-right: 15px;
  color: #aaa;
  font-size: 16px;
}
.topThree {
  color: #e13e3e;
}
.hotSearchWordTopThree {
  font-weight: 700;
  color: black;
}
.el-aside {
  li {
    text-align: center;
    font-size: 17px;
    width: 200px;
  }
  span {
    margin-left: 10px;
  }
  i {
    font-size: 20px;
  }
  a {
    color: #333;
  }
  .el-menu-item:hover {
    background-color: #f5f5f6 !important;
  }
}
.el-main {
  border-left: 1px solid #cccccc;
  background-color: #fff;
  color: #333;
  // height: 100%;
  padding-bottom: 100px;
}
</style>